<template>
    <div class="tab-content">
        <el-form ref="sharedTravelFormRef" :model="sharedTravelForm" :rules="sharedTravelRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="快递订单" prop="expressOrder">
                        <el-input-number v-model="sharedTravelForm.expressOrder" placeholder="请输入快递订单数量" :controls="false" :validate-event="true"/>
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商超订单" prop="retailOrder">
                        <el-input-number v-model="sharedTravelForm.retailOrder" placeholder="请输入商超订单数量" :controls="false" />
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="医药订单" prop="medicalOrder">
                        <el-input-number v-model="sharedTravelForm.medicalOrder" placeholder="请输入医药订单数量" :controls="false"/>
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="生鲜订单" prop="freshOrder">
                        <el-input-number v-model="sharedTravelForm.freshOrder" placeholder="请输入生鲜订单数量" :controls="false"/>
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="冷链订单" prop="coldChainOrder">
                        <el-input-number v-model="sharedTravelForm.coldChainOrder" placeholder="请输入冷链订单数量" :controls="false"/>
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="村镇订单" prop="ruralOrder">
                        <el-input-number v-model="sharedTravelForm.ruralOrder" placeholder="请输入村镇订单数量" :controls="false"/>
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="savesharedTravelData">保存订单占比数据配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { updateDataClassify } from '@/api/port'
    import { ElMessage } from 'element-plus'


    // 数字范围验证函数
    const validateNumber = (rule: any, value: number, callback: (error?: Error) => void) => {
        if (value === null || value === undefined) {
            callback(new Error('请输入数字'))
        } else if (value < 0) {
            callback(new Error('请输入大于等于0的数字'))
        } else if (value > 1000000) {
            callback(new Error('请输入小于等于1000000的数字'))
        } else {
            callback()
        }
    }
    // 表单验证规则
    const sharedTravelRules = {
        expressOrder: [
            { required: true, message: '快递订单数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        retailOrder: [
            { required: true, message: '商超订单数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        medicalOrder: [
            { required: true, message: '医药订单数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        freshOrder: [
            { required: true, message: '生鲜订单数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        coldChainOrder: [
            { required: true, message: '冷链订单数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        ruralOrder: [
            { required: true, message: '村镇订单数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ]
    }
    // 模块1: 订单占比数据配置表单
    const sharedTravelForm = ref<{
        expressOrder: number, 
        retailOrder: number, 
        medicalOrder: number,
        freshOrder: number,
        coldChainOrder: number,
        ruralOrder: number
    }>({
        expressOrder: 0, // 快递订单
        retailOrder: 0, // 商超订单
        medicalOrder: 0, // 医药订单
        freshOrder: 0, // 生鲜订单
        coldChainOrder: 0, // 冷链订单
        ruralOrder: 0 // 村镇订单
    })

    

    
    // 保存函数
    const sharedTravelFormRef = ref()
    const savesharedTravelData = async () => {
        if (!sharedTravelFormRef.value) return
        
        try {
            await sharedTravelFormRef.value.validate()
            await updateDataClassify({
                id: 5,
                key: 'module1',
                value: sharedTravelForm.value
            })
            console.log('保存订单占比数据配置:', sharedTravelForm.value)

            ElMessage.success('订单占比数据配置保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }
    // 初始化函数
    const init = (module: any) => {
        console.log(module)
        if(module){
            sharedTravelForm.value = module
        }else{
            sharedTravelForm.value = {
                expressOrder: 0, // 快递订单
                retailOrder: 0, // 商超订单
                medicalOrder: 0, // 医药订单
                freshOrder: 0, // 生鲜订单
                coldChainOrder: 0, // 冷链订单
                ruralOrder: 0 // 村镇订单
            }
        }
    }
    defineExpose({
        init
    })

</script>
<style lang="less" scoped>

</style>